<!DOCTYPE html>
<html>

<meta charset="utf-8">
<head th:include="include :: header"></head>

<body class="gray-bg">
<div class="columns pull-right">
	<button class="btn btn-success" onclick="reLoad()">查询</button>
</div>
<div class="columns pull-right col-md-2 nopadding">
	<input id="searchName" onkeyup="if(event.keyCode==13) {reLoad()}" type="text" class="form-control"
		   placeholder="名字">
</div>
<div class="columns pull-right col-md-2 nopadding">
<!--<input id="search_input"  type="text" class="form-control"

	   placeholder="名字">
</div>-->

	<div class="wrapper wrapper-content animated fadeInRight">
		<input id="id" name="id" th:value="${userId}"
						   type="hidden">

		<div class="row">

			<div class="col-sm-12">

				<div class="ibox-content">
					<div id="deptTree"></div>
				</div>
				<div class="form-group hidden">
					<div class="col-sm-12 col-sm-offset-12">
						<button type="submit" class="btn btn-primary">提交</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	<div th:include="include :: footer"></div>


	<script type="text/javascript">
		var id = $("#id").val();
		var searchName = $("#searchName").val();

		$(document).ready(function() {
			getTreeData(id)
		});
		
		function getTreeData(id,searchName) {
			$.ajax({
				type : "GET",
				url : "/wx/memberUser/tree/"+id+"&"+searchName,
				success : function(tree) {
					console.log(tree)
					loadTree(tree);
				}
			});
		}
		function loadTree(tree) {

			$('#deptTree').jstree({
				'core' : {
					'data' : tree

				},
				"plugins" : [ "search" ]
				//"plugins" : [ "search", "state", "types", "wholerow","checkbox" ]
			});

			$('#deptTree').jstree().open_all();
			$('#deptTree').jstree(true).refresh(); // 刷新树

		}
		$('#deptTree').on("ready.jstree", function(e, data) {
			$('#deptTree').jstree().close_all()

		})
		$('#deptTree').on("changed.jstree", function(e, data) {
			if(data.node.id!=-1){
				parent.loadDept(data.node.id,data.node.text);
				var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
				parent.layer.close(index);
			}
			
		});

		$('#search_input').keyup(function() {
			/*$('#deptTree').show();

			$('#deptTree').jstree('search', $(this).val());*/
			$('#deptTree').jstree(true).show_all();
			$('#deptTree').jstree('search', $(this).val());
		});

		/*var to = false;
		$('#search_input').keyup(function () {
			if(to) {
				clearTimeout(to);
			}

			to = setTimeout(function () {
				$('#deptTree').jstree(true).search($('#search_input').val());

			}, 250);
		});*/

		function reLoad() {
			//$('#deptTree').jstree(true).refresh(); // 刷新树
			var id = $("#id").val();
			var searchName = $("#searchName").val();
			$('#deptTree').jstree(true).destroy();// 清除树节点
			// 重新设置树的JSON数据集
			getTreeData(id,searchName);



		}
		
	</script>
</body>

</html>
